<template>
  <div class="preview">
    <van-overlay :show="show" @click="toggleShow">
      <video-player
        v-if="show"
        :src="rec.url"
        @pause="pauseVideo"
        @loadeddata="findvideocover"
        controls
        :playback-rates="[0.5, 1.0, 1.25, 1.5, 2.0]"
      />
    </van-overlay>
  </div>
</template>

<script lang="ts" setup>
import { reactive, ref } from "vue";
import { VideoPlayer } from "@videojs-player/vue";
import "video.js/dist/video-js.css";
const rec = reactive({
  url: "",
});
const show = ref(false);
const toggleShow = (url) => {
  if (typeof url === "string") {
    rec.url = url;
  }
  show.value = !show.value;
};
// const setVideoPoster = () => {
//   let video = event.target;
//   let canvas = document.createElement("canvas"); // 创建 canvas
//   const ctx = canvas.getContext("2d");
//   video.currentTime = 1; // 第一帧
//   video.oncanplay = () => {
//     canvas.width = video.clientWidth; // 获取视频宽度
//     canvas.height = video.clientHeight; //获取视频高度
//     var img = new Image(); // 这里使用img是为了解决视频跨域 canvas.toDataURL会提示错误的问题
//     img.onload = function () {
//       // canvas绘图
//       ctx.drawImage(video, 0, 0, video.clientWidth, video.clientHeight);
//       // 转换成base64形式并设置封面
//       video.poster = canvas.toDataURL("image/jpeg", 1); // 截取后的视频封面
//     }
//   }
// }
defineExpose({
  toggleShow,
});
</script>

<style lang="less" scoped>
.preview {
  /deep/ .van-overlay {
    padding: 88px 0;
    background: #000;
  }
  .video-js {
    width: 100%;
    height: 100%;
  }
}
</style>
